<script context="module">
	export async function preload(page, session) {
	}
</script>

<script>
	import {
		UncontrolledDropdown,
		DropdownToggle,
		UncontrolledCollapse,
		DropdownMenu,
		DropdownItem,
	} from "sveltestrap/src";
	import Loading from "../components/Loading.svelte";
	import MyCollapse from "../components/MyCollapse.svelte";
	import { goto, stores } from "@sapper/app";
	import { onMount } from "svelte";
	const { preloading, page, session } = stores();
	import { SvelteToast, toast } from "@zerodevx/svelte-toast";
	export let segment;
	segment = !segment;
	let user;
	$: user = $session.user;
	let isOpen = false;
	let openNav = false;
	let q = "";
	const options = {
		theme: {
			"--toastBackground": "#4e73df",
			"--toastProgressBackground": "#224abe",
		},
	};
	async function logout() {
		const response = await fetch("/api2/logout", {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
				Accept: "application/json",
			},
		});
		const parsed = await response.json();
		if (parsed.success == 1) {
			$session.user = null;
			$session.token = null;
		}
	}
	onMount(async () => {});
</script>

<svelte:head>
	<style>
		body {
			font-family: Roboto, pingfang SC, helvetica neue, arial, hiragino sans gb,
				microsoft yahei ui, microsoft yahei, simsun, sans-serif;
		}
	</style>
</svelte:head>

<main>
	<!-- Page Wrapper -->
	<div id="wrapper">
		<!-- Sidebar -->
		<ul
			class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion {openNav
				? 'toggled-sidebar'
				: ''}"
			id="accordionSidebar"
		>
			<!-- Sidebar - Brand -->
			<a
				class="sidebar-brand d-flex align-items-center justify-content-center"
				href="/"
			>
				<div class="sidebar-brand-icon rotate-n-15">
					<i class="fas fa-laugh-wink" />
				</div>
				<div class="sidebar-brand-text mx-3">记账中心</div>
			</a>

			<!-- Divider -->
			<hr class="sidebar-divider my-0" />

			<!-- Nav Item - Home -->
			<li class="nav-item">
				<a class="nav-link" href="/">
					<i class="fas fa-fw fa-home" />
					<span>控制面板</span></a
				>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/cash">
					<i class="fas fa-fw fa-money-bill-alt" />
					<span>收支管理</span></a
				>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/products">
					<i class="fas fa-fw fa-shopping-bag" />
					<span>库存管理</span></a
				>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/customers">
					<i class="fas fa-fw fa-user-secret" />
					<span>客户管理</span></a
				>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/users">
					<i class="fas fa-fw fa-user" />
					<span>用户管理</span></a
				>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/productcategories">
					<i class="fas fa-fw fa-cube" />
					<span>商品分类管理</span></a
				>
			</li>
		</ul>
		<!-- End of Sidebar -->

		<!-- Content Wrapper -->
		<div id="content-wrapper" class="d-flex flex-column">
			<!-- Main Content -->
			<div id="content">
				<!-- Topbar -->
				<nav
					class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"
				>
					<!-- Sidebar Toggle (Topbar) -->
					<button
						id="sidebarToggleTop"
						on:click={() => (openNav = !openNav)}
						class="btn btn-link d-md-none rounded-circle mr-3"
					>
						<i class="fa fa-bars" />
					</button>

					<!-- Topbar Search -->
					<form
						class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"
						on:submit|preventDefault={() =>
							q.length > 1 && goto(`/search?q=${q}`)}
					>
						<div class="input-group">
							<input
								type="text"
								bind:value={q}
								class="form-control bg-light border-0 small"
								placeholder="搜索库存"
								aria-label="Search"
								aria-describedby="basic-addon2"
							/>
							<div class="input-group-append">
								<button class="btn btn-primary" type="submit">
									<i class="fas fa-search fa-sm" />
								</button>
							</div>
						</div>
					</form>

					<!-- Topbar Navbar -->
					<ul class="navbar-nav ml-auto">
						<!-- Nav Item - Search Dropdown (Visible Only XS) -->
						<UncontrolledDropdown
							class="nav-item dropdown no-arrow mx-1 d-sm-none"
						>
							<DropdownToggle nav class="nav-link"
								><i class="fas fa-search fa-fw" /></DropdownToggle
							>
							<DropdownMenu
								class="dropdown-menu dropdown-menu-right p-3 shadow"
							>
								<form
									class="form-inline mr-auto w-100 navbar-search"
									on:submit|preventDefault={() =>
										q.length > 1 && goto(`/search?q=${q}`)}
								>
									<div class="input-group">
										<input
											type="text"
											bind:value={q}
											class="form-control bg-light border-0 small"
											placeholder="搜索库存"
											aria-label="Search"
											aria-describedby="basic-addon2"
										/>
										<div class="input-group-append">
											<button class="btn btn-primary" type="submit">
												<i class="fas fa-search fa-sm" />
											</button>
										</div>
									</div>
								</form>
							</DropdownMenu>
						</UncontrolledDropdown>
						{#if user}
							<UncontrolledDropdown class="nav-item dropdown no-arrow">
								<DropdownToggle nav class="nav-link">
									<button class="btn btn-info">发起</button>
								</DropdownToggle>
								<DropdownMenu class="dropdown-menu dropdown-menu-right shadow">
									<a class="dropdown-item" href="/post/cash">
										<i class="fas fa-money-bill-alt fa-sm fa-fw mr-2 text-gray-400" />
										创建收支
									</a>
									<div class="dropdown-divider" />
									<a class="dropdown-item" href="/post/customer">
										<i class="fas fa-user-secret fa-sm fa-fw mr-2 text-gray-400" />
										创建客户
									</a>
									<div class="dropdown-divider" />
									<a class="dropdown-item" href="/post/user">
										<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400" />
										创建用户
									</a>
									<div class="dropdown-divider" />
									<a class="dropdown-item" href="/post/product">
										<i class="fas fa-shopping-bag fa-sm fa-fw mr-2 text-gray-400" />
										创建商品
									</a>
									<div class="dropdown-divider" />
									<a class="dropdown-item" href="/post/productcategory">
										<i class="fas fa-cube fa-sm fa-fw mr-2 text-gray-400" />
										创建商品分类
									</a>
								</DropdownMenu>
							</UncontrolledDropdown>
						{/if}
						<div class="topbar-divider d-none d-sm-block" />

						{#if user}
							<!-- Nav Item - User Information -->
							<UncontrolledDropdown class="nav-item dropdown no-arrow">
								<DropdownToggle nav class="nav-link">
									<span class="mr-2 d-none d-lg-inline text-gray-600 small"
										>{user.name}</span
									>
									<img
										alt="avatar"
										class="img-profile rounded-circle"
										src="img/undraw_profile.svg"
									/>
								</DropdownToggle>
								<DropdownMenu class="dropdown-menu dropdown-menu-right shadow">
									<!-- <a class="dropdown-item" href="/users/{user._id}">
										<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400" />
										个人页面
									</a>
									<div class="dropdown-divider" /> -->
									<button
										class="dropdown-item"
										on:click={logout}
										data-toggle="modal"
										data-target="#logoutModal"
									>
										<i
											class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"
										/>
										注销
									</button>
								</DropdownMenu>
							</UncontrolledDropdown>
						{:else}
							<a class="nav-link d-flex align-items-center" href="/login"
								>登录</a
							>
						{/if}
					</ul>
				</nav>
				<!-- End of Topbar -->

				<!-- Begin Page Content -->
				<div class="container-fluid">
					<!-- Page Heading -->
					<slot />
				</div>
				<!-- /.container-fluid -->
			</div>
			<!-- End of Main Content -->

			<!-- Footer -->
			<footer class="sticky-footer bg-white">
				<div class="container my-auto">
					<div class="copyright text-center my-auto">
						<span>Copyright &copy; 记账系统 2021</span>
					</div>
				</div>
			</footer>
			<!-- End of Footer -->
		</div>
		<!-- End of Content Wrapper -->
	</div>
	<!-- End of Page Wrapper -->
	{#if $preloading}
		<Loading />
	{/if}
	<!-- Scroll to Top Button-->
	<!-- <a class="scroll-to-top rounded" href="#page-top">
		<i class="fas fa-angle-up" />
	</a> -->
</main>
<SvelteToast {options} />

<style>
</style>
